﻿<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<!-- 来源bootstrap网站精选 官网http://www.leyu.net/-->
        <title>乐鱼网</title>
        <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="css/index.css" />
        <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" media="screen" />

         <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">
           </script>

           <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">
           </script>
        <![endif]-->
    </head>
    <body>

  <!-- 导航栏   -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span >导航条</span>
                
                </button>
                <a class="navbar-brand" href="#">乐鱼网</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">技术兼职<span class="sr-only">(current)</span></a></li>
                    <li><a href="#">招聘需求</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">注册</a></li>
                    <li><a href="#">登录</a></li>
                </ul>
            </div>
        </div>
    </nav> 


<!--  顶部图片 -->
    <header>
      <div class="top-bar">        
        <div class="mainbar">
<!-- 要点:图片固定定位 ,Z-index设为-1 -->
            <img src="img/promo-bg.jpg" />
        </div>
        <div class="container barInfor">
<!-- 要点:用JS添加css5过渡样式,媒体查询更改字体大小 -->
            <p>预约互联网坐班兼职工程师</p>
            <span>
               <a href="#"> 
<!-- 要点:动画函数  infinite动画不停止-->
                 <img src="img/play.svg"/>
                 预约知名互联网公司的产品、美工、前端、后端等技术人员到您的团队坐班兼职。
               </a>
            </span>
        </div>
     </div>
    </header>


<!-- 主要内容   -->
    <main>
        <section>
            <div  class="container section-first">
               <div class="source container">
                    <p class="source-talent">人才来源</p>
                    <p class="source-datail">乐鱼网兼职技术人员来自各大互联网公司，普遍具有多年工作经验，平台严格把控人才入口，确保工作质量和效率。</p>
                <div class="line"></div>
                <div class="internet-company">

<!-- 要点:栅格系统定制60列 -->
<!-- 要点:图片显示灰色的CSS属性-webkit-filter: grayscale(1);设为灰色   Hover后设为-webkit-filter: grayscale(0);-->
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_360.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_alibaba.jpg"/></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_baidu.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_jingdong.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_sina.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_souhu.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_suning.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_tengxun.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_wangyi.jpg" /></div>
                    <div class="col-md-12 col-sm-15 col-xs-20"><img src="img/i_xiaomi.jpg" /></div>
                </div>
              </div>
              <div class="container btns">
                  <button type="button" class="btn btn-primary">浏览人才</button>
                  <button type="button" class="btn btn-success">发布招聘需求</button>
              </div>
            </div>
        </section>
    </main>    
        <script src="lib/jquery/jquery.js"></script>  
        <script src="lib/bootstrap/js/bootstrap.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>